<template>
<div class="wholePage">
  <el-dialog
  :visible.sync="addDisplay"
  width="38%"
  :before-close="addClose">
  <!-- 添加普通管理员表单 -->
  <el-form :model="addForm" label-width="100px" :rules="rules" ref="addForm">
  <el-form-item label="账号" prop="username">
    <el-input v-model="addForm.username"></el-input>
  </el-form-item>
  <el-form-item label="姓名" prop="a_realName">
    <el-input v-model="addForm.a_realName"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="addForm.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button
          size="medium"
          type="primary"
          @click="makeAdd">提交</el-button>
  </el-form-item>
  </el-form>

  </el-dialog>
  <div class="pageHeader" style="display:flex;justify-content:space-between">
    <div>
      <el-button
          size="mini"
          type="info"
          @click="addManager">添加+</el-button>
    </div>
    <div>
      <el-input
         placeholder="请输入管理员名字"
         v-model="search"
         size="mini"
         clearable>
         <!-- <el-button @click="searchShow" v-if="search" style="padding:3px;margin-top:2px;background:transparent;border:0;font-size:18px" slot="suffix" size="mini" icon="el-icon-circle-close"></el-button> -->
      </el-input>
    </div>

  </div>
  <div class="pageBody">
    <!-- 编辑 -->
    <el-dialog
  :visible.sync="editDisplay"
  width="38%">
  <el-form :model="editForm" label-width="100px" :rules="rules" ref="editForm">
  <el-form-item label="账号" prop="username">
    <el-input disabled v-model="editForm.username"></el-input>
  </el-form-item>
  <el-form-item label="姓名" prop="a_realName">
    <el-input v-model="editForm.a_realName"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="editForm.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button
          size="medium"
          type="primary"
          @click="makeEdit">提交</el-button>
  </el-form-item>
  </el-form>

    </el-dialog>
    <el-table
    v-loading="loading"
    :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}"
    :data="tableData"
    style="width: 100%;font-size:16px;"
    size="mini">
    <el-table-column
      label="序号"
      width="180">
      <template slot-scope="scope">
        <!-- <i class="el-icon-time"></i> -->
        <span style="margin-left: 10px">{{ scope.$index+1 }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="账号"
      width="180"
      prop="a_username">
      <template slot-scope="scope">
            <el-tag style="font-size:16px">{{ scope.row.a_username }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="120"
      prop="a_realName">
    </el-table-column>
    <el-table-column
      label="密码"
      width="280">
      <template slot-scope="scope">
        <i class="el-icon-unlock"></i>
        <span style="margin-left: 10px">{{ scope.row.a_password }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="角色"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-user"></i>
        <span style="margin-left: 10px">{{ scope.row.a_role==1? '系统管理员':'普通管理员' }}</span>
      </template>
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">

      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          icon="el-icon-edit"
          @click="handleEdit(scope.$index, scope.row)"></el-button>
        <el-button
          v-show="scope.row.a_role!=1"
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="handleDelete(scope.$index, scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
  <div class="pageFooter">
    <el-pagination
  background
      @current-change="handleCurrentChange"
      :current-page.sync="thePage"
      :page-size="10"
  layout="prev, pager, next"
  :total="total">
</el-pagination>
  </div>
</div>
</template>

<script>
import { getManagerList, addManager, deleteManager, editManager } from '../api/manager.js'
export default {
  data () {
    return {
      tableData: [],
      wholeData: [],
      search: '',
      addDisplay: false,
      editDisplay: false,
      addForm: {
        username: '',
        password: '',
        a_realName: ''
      },
      total: 0,
      thePage: 1,
      editForm: {
        username: '',
        password: '',
        a_realName: ''

      },
      loading: true,
      rules: {
        username: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 2 到 10个字符', trigger: 'blur' }
        ],
        a_realName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2到 10个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 搜索为空
    // searchShow () {
    //   this.search = ''
    // },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.thePage = val
      this.tableData = this.wholeData.slice(this.thePage * 10 - 10, this.thePage * 10)
    },
    // 编辑操作
    handleEdit (index, row) {
      this.editForm.username = row.a_username
      this.editForm.password = row.a_password
      this.editForm.a_realName = row.a_realName
      this.editDisplay = true
    },
    // 执行修改
    makeEdit () {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          editManager(this.editForm).then(({ data }) => {
            if (data.status === 200) {
              this.$message.success('修改成功')
              this.editDisplay = false
              this.getManagers()
              return false
            } else {
              return this.$message.error('修改失败')
            }
          })
        }
      })
    },
    // 删除操作
    handleDelete (index, row) {
      deleteManager({ id: row.a_id }).then(({ data }) => {
        if (data.status === 200) {
          this.$message.success('删除成功')
          this.getManagers()
          return false
        } else {
          return this.$message.error('删除失败')
        }
      })
      // console.log(index, row)
    },
    // 获取管理员列表
    getManagers () {
      getManagerList({ info: '获取管理员列表' }).then(({ data }) => {
        // console.log(data)
        if (data.status === 200) {
          this.tableData = data.list.slice(0, 10)
          this.total = data.list.length
          this.loading = false
          this.wholeData = data.list
        } else {
          this.$message.error('数据请求错误')
        }
      })
    },
    // 添加普通管理员
    addManager () {
      this.addDisplay = true
    },
    // 执行添加
    makeAdd () {
      this.submitForm()
    },
    // 关闭弹幕
    addClose () {
      this.$refs.addForm.resetFields()
      this.addDisplay = false
    },
    // 校验表单
    submitForm () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          addManager({ info: this.addForm }).then(({ data }) => {
            if (data.status === 200) {
              this.$message.success('添加成功')
              this.$refs.addForm.resetFields()
              this.addDisplay = false
              this.getManagers()
              return false
            } else if (data.status === -888) {
              return this.$message.info('用户名存在')
            } else {
              return this.$message.error('添加失败')
            }
          })
        } else {
          return this.$message.error('表单格式错误')
        }
      })
    }

  },
  watch: {
    search (newName, oldName) {
      // this.thePage = 0
      const newArr = this.wholeData.filter(data => !this.search || data.a_username.toLowerCase().includes(this.search.toLowerCase()))
      this.total = newArr.length
      this.tableData = newArr.slice(this.thePage * 10 - 10, this.thePage * 10)

      // console.log(newName)
    }
  },

  mounted () {
    this.getManagers()
  }

}

</script>
<style scoped lang='less'>
.pageFooter{
  position: absolute;
  right:0;
  bottom:0;
}
</style>
